<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:37:57
-->
<template>
  <div class="page-warp">
    <ItemWrap4 title="专线货量排名" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <TopLeft style="margin-top: 0px" @chartClick="chartClick0" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '客户构成'" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <TopRight style="margin-top: -12px" @chartClick="chartClick1" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '线路货量'" v-if="type === 'Center' || type === 'LeftRight' || type === 'RightLeft'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BottomLeft style="margin-top: 0px" @chartClick="chartClick2" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '收货价格'"
      v-if="(type != 'Center' && type != 'LeftLeft' && type != 'RightRight') || type === 'LeftRight' || type === 'RightLeft'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BottomRight style="margin-top: -12px" @chartClick="chartClick3" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '收货价格'" v-if="type === 'Center'"
      style="width: 600px; height: 310px; margin: 10px auto 25px auto;">
      <BigBottomLeft style="margin-top: -12px" @chartClick="chartClick3" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '线路时效'" v-if="type === 'Center'"
      style="width: 600px; height: 310px; margin: 10px auto 25px auto;">
      <BigBottomRight style="margin-top: -12px" @chartClick="chartClick4" />
    </ItemWrap4>
  </div>
</template>

<script>
import TopLeft from './top-left.vue';
import TopRight from './top-right.vue';
import BottomLeft from './bottom-left.vue';
import BottomRight from './bottom-right.vue';
import BigBottomLeft from './bigBottomLeft.vue'
import BigBottomRight from './bigBottomRight.vue'

export default {
  name: 'ARightLeft',
  components: {
    TopLeft,
    TopRight,
    BottomLeft,
    BottomRight,
    BigBottomLeft,
    BigBottomRight
  },
  props: {
    type: {
      type: String,
      default: 'RightLeft',
    }
  },
  data() {
    return {
      mapTitle: '燕文物流'
    };
  },
  mounted() {
    // this.list = [...componentList]
  },
  created() {
  },
  methods: {
    chartClick0(params) {
      this.mapTitle = `${params.name}`;
      this.chartClick('ARightLeftTopLeft', params);
    },
    chartClick1(params) {
      this.chartClick('ARightLeftTopCenter', params);
    },
    chartClick2(params) {
      this.chartClick('ARightLeftTopRight', params);
    },
    chartClick3(params) {
      this.chartClick('ARightLeftBottomLeft', params);
    },
    chartClick4(params) {
      this.chartClick('ARightLeftBottomRight', params);
    },
    chartClick(name, params) {
      this.$emit('chartClick', { name, type: this.type, options: params });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: auto 5px;
}
</style>
